// 导入XtxMessage.vue组件
// 通过代码的方式去渲染它
import { h, render } from "vue"
import { Message } from "./type"
import XtxMessage from "./XtxMessage.vue"

// 创建一个dom容器
// 把这个容器添加在body上
export const div = document.createElement( 'div' ) 
div.className = 'xtx-message-container'
document.body.appendChild(div)

// 调用这个函数
export default function Message(obj:Message){
  // h 产生虚拟DOM 
  const vNode = h(XtxMessage,{ type: obj.type, text:obj.text})
  let timer = -1 
  render(vNode,div)
  clearTimeout(timer)
  timer = window.setTimeout(()=>{
    render(null,div)
  },obj.duration || 5000)
}

  // 把虚拟dom放入上面定义的容器中
Message.success = (value:string) =>{
  Message({type:"success",text:value,duration:1500})
}
Message.error = (value:string) =>{
  Message({type:'error',text:value,duration:1500})
}

Message.warning = (value:string) =>{
  Message({type:"warning",text:value,duration:1500})
}